<template>
    <div class="app-container">
        <h1>设备</h1>
        <div style="display: flex;align-items: center;">
            <el-select placeholder="请选择" style="margin-top: -10px;">
                <el-option @click.native="pageDto.now = 1; handleSelectTeam(item)" key="-1" label="所有产品" value="-1">
                </el-option>
                <el-option @click.native="pageDto.now = 1; handleSelectTeam(item)" v-for="item in productNameAndIdList"
                    :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
            <div style="display: inline-block;margin-left: 30px;margin-bottom: -30px;">
                <div style="display: inline-block;margin-left: 30px;">
                    <span style="height: 30px;">设备总数</span>
                    <h2>{{ total }}</h2>
                </div>
                <div style="display: inline-block;margin-left: 30px;">
                    <span>激活总数</span>
                    <h2>{{ 3 }}</h2>
                </div>
                <div style="display: inline-block;margin-left: 30px;">
                    <span>当前在线</span>
                    <h2>{{ 0 }}</h2>
                </div>
            </div>
        </div>
        <div style="margin-top: 10px;">
            <el-button type="primary" icon="el-icon-circle-plus-outline" style="width: 140px;height: 40px;"
                @click="dialogFormVisible = true; findAdd()">增加</el-button>
        </div>
        <div style="margin-top: 20px;">
            <el-table :data="deviceList" style="width: 100%"
                :header-cell-style="{ background: '#F7F7F8', color: '#18191B', 'text-align': 'center' }">
                <el-table-column prop="name" label="设备名称" align="center"> </el-table-column>
                <el-table-column prop="productName" label="所属产品" align="center"> </el-table-column>
                <el-table-column prop="deviceKey" label="key" align="center"> </el-table-column>
                <el-table-column label="设备激活状态" align="center">
                    <!-- 自定义渲染 -->
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.active == 1" key="未激活" type="danger" effect="dark">
                            {{ '未激活' }}
                        </el-tag>
                        <el-tag v-if="scope.row.active == 2" key="激活" type="success" effect="dark">
                            {{ '激活' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="typeName" label="开/关设备" align="center">
                    <!-- 自定义渲染 -->
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.typeName == '智能网关'" key="网关设备" type="success" effect="plain">
                            {{ '网关设备' }}
                        </el-tag>
                        <el-link type="danger" v-if="scope.row.typeName != '智能网关'" :underline="false"
                            @click="dialogFormVisible1 = true; send(scope.row.id)">发送指令</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" :formatter="dateFormat" align="center"></el-table-column>
                <el-table-column label="操作" align="center">

                    <template slot-scope="scope">
                        <el-link @click="details(scope.row.id)" type="primary" :underline="false">详情</el-link>&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-link @click="deleteData(scope.row.id)" type="primary" :underline="false">删除</el-link>
                    </template>

                </el-table-column>

            </el-table>
            <!-- 分页组件 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageDto.now"
                :page-sizes="[5, 10, 50, 100]" :page-size="pageDto.size" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <el-dialog title="添加设备" :visible.sync="dialogFormVisible" width="500px">
            <el-form :model="device" :rules="rules" ref="device" label-width="100px" class="demo-ruleForm"
                label-position="top" size="mini">
                <el-form-item label="产品" prop="productId">
                    <el-select v-model="device.productId" placeholder="请选择产品" style="width: 100%;">
                        <el-option v-for="item in productNameAndIdList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备类型" prop="deviceTypeId">
                    <el-select v-model="device.deviceTypeId" placeholder="请选择设备类型" style="width: 100%;">
                        <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备编号(同一个产品下设备编号不能重复复)" prop="deviceIndex">
                    <el-input-number v-model="device.deviceIndex" controls-position="right" :min="0" :max="100"
                        style="width: 100%;"></el-input-number>
                </el-form-item>
                <el-form-item label="父设备(非必选项)" prop="parentId">
                    <el-select v-model="device.parentId" placeholder="请选择父设备(非必选项)" style="width: 100%;">
                        <!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option> -->
                    </el-select>
                </el-form-item>
                <el-form-item label="设备名称" prop="name">
                    <el-input v-model="device.name" placeholder="请输入设备名称"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('device')">重置</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('device')">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="发送指令" :visible.sync="dialogFormVisible1" width="500px">
            <el-form :model="deviceDetails" label-width="100px" class="demo-ruleForm" label-position="top" size="mini">
                <el-form-item label="设备名称" prop="name">
                    <el-input v-model="deviceDetails.name" disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="设备Key" prop="deviceKey">
                    <el-input v-model="deviceDetails.deviceKey" disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="继电器编号" prop="groupId">
                    <el-input-number v-model="deviceDetails.groupId" controls-position="right" :min="0" :max="100"
                        style="width: 100%;"></el-input-number>
                </el-form-item>
                <el-form-item label="开关指令" prop="active">
                    <el-select v-model="deviceDetails.active" style="width: 100%;">
                        <el-option key="1" label="关" value="1"></el-option>
                        <el-option key="2" label="开" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false, deviceDetails.active = undefined">取 消</el-button>
                <el-button type="primary" @click="submit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
//导入device api
import { page, add, drop, productAll, findTypeLsit, details, sendInstruction} from "@/api/device";
export default {
    data() {
        return {
            deviceDetails: {},
            pageDto: {
                now: 1,
                size: 5,
            },
            pages: 0,
            total: 0,
            deviceList: [],
            typeList: [],
            productNameAndIdList: [],
            productId: -1,
            dialogFormVisible: false,
            dialogFormVisible1: false,
            device: {
                name: '',
                productId: '',
                deviceTypeId: '',
                deviceIndex: '',
                parentId: 0,
            },
            rules: {
                name: [
                    { required: true, message: '请输入设备名称', trigger: 'blur' },
                ],
                productId: [
                    { required: true, message: '请选择产品', trigger: 'blur' },
                ],
                deviceTypeId: [
                    { required: true, message: '请选择产品', trigger: 'blur' },
                ],
                deviceIndex: [
                    { required: true, message: '请选择产品', trigger: 'blur' },
                ]
            }
        };
    },
    methods: {

        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                console.log(valid);
                if (valid) {
                    add(this.device).then((res) => {
                        if (res.code == 0) {
                            this.dialogFormVisible = false;
                            this.$message({
                                message: '添加成功！',
                                type: 'success'
                            });
                        } else {
                            this.$message.error('关键信息未填写！');
                        }
                    })

                } else {
                    this.$message.error('添加失败！');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        //格式日期
        dateFormat(row, column, cellValue, index) {
            const daterc = row[column.property]
            if (daterc) {
                if (daterc.indexOf('T') === -1) return daterc
                const arr = daterc.split('T')
                const d = arr[0]
                const darr = d.split('-')
                const t = arr[1]
                const tarr = t.split('.000')
                const marr = tarr[0].split(':')
                const dd = darr[0] + '-' + darr[1] + '-' + darr[2] + ' ' + marr[0] + ':' + marr[1] + ':' + marr[2].substring(0, 2)
                return dd
            }
        },
        search() {
            page(this.productId, this.pageDto).then((res) => {
                this.deviceList = res.list;
                this.pages = res.pages;
                this.total = res.total;
            });
            this.product()
        },
        product() {
            productAll().then((res) => {
                this.productNameAndIdList = res;
            })
        },
        handleSelectTeam(item) {
            if (item) {
                this.productId = item.id;
            } else {
                this.productId = -1;
            }
            this.search()
        },
        handleSizeChange(size) {
            this.pageDto.size = size;
            this.search();
        },
        handleCurrentChange(now) {
            this.pageDto.now = now;
            this.search();
        },
        details(id) {
            localStorage.setItem("id", id)
            this.$router.push({ path: "/dept/details" })
        },
        deleteData(id) {
            drop(id).then((res) => {
                if (res.code == 0) {
                    this.$message({
                        message: '删除成功！',
                        type: 'success'
                    });
                    this.search()
                } else {
                    this.$message.error('删除失败！');
                    this.search()
                }
            })
        },
        findAdd() {
            findTypeLsit().then((res) => {
                this.typeList = res
            })
        },
        send(id) {
            details(id).then((res) => {
                this.deviceDetails = res.data
                if(this.deviceDetails.active == 1){
                    this.deviceDetails.active = "关"
                }else{
                    this.deviceDetails.active = "开"
                }
            })
        },
        submit(){
            sendInstruction(this.deviceDetails).then((res) =>{
                if (res.code == 0) {
                    this.$message({
                        message: '修改成功！',
                        type: 'success'
                    });
                    this.dialogFormVisible1 = false
                    this.search()
                } else {
                    this.$message.error('修改失败！');
                }
            })
        }
    },
    created() {
        this.search()
    }
}
</script>
<style lang='scss'>
.el-input-number .el-input__inner {
    text-align: left;
}
</style>